<template>
  <div class="xiang">
    <div class="header">
      <div class="sa">
        <van-icon @click="bock" name="arrow-left" />
        <span>详情</span>
        <span></span>
      </div>
    </div>
    
    <div class="main">
      <div class="bin">
        <div class="zhong">
          <img :src="state.data.cityimg" alt="" />
          <div class="z">
            <div>宜居房产</div>
            <div class="h4">{{ state.data.name }}</div>
            <div class="tel">{{ state.data.haoma }}</div>
            <div class="city">长江路105号东50米</div>
          </div>
        </div>
      </div>
      <div class="lins">
        <div class="chang">
          <span></span>
          总房数：{{state.totle}}
        </div>
        <van-tabs>
          <van-tab v-for="(item,ind) in state.sf" :key="ind" :title="item.name">
            <div class="ls">
              <div class="ll">
                <div class="lie" v-for="(item,ind) in state.imgs" :key="ind">
                  <img :src="item.img" alt="">
                  <div class="yo">
                    <div class="biao">{{item.name}}</div>
                    <div class="er">
                      <span>{{item.tingshi}}|96m²</span>
                      <span>兴鸿一品</span>
                    </div>
                    <div class="san">
                      <sapn class="s"><span class="t"><span>{{item.m2}}</span>万</span> <span class="r">{{item.m2jiage}}元/m²</span></sapn>
                      <sapn class="f">2天前</sapn>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import axios from "../axios/index";
export default {
  name: "Xiangq",
  setup() {
    //路由
    const router = useRouter();
    const state = reactive({
      id: [],
      data: [],
      imgs: [],
      totle: [],
      sf:[{
        name:"买房"
      },{
        name:"租房"
      },{},{},{},{},{},{},]
    });
    state.id = router.currentRoute.value.params.id;
    onMounted(async () => {
      // console.log(state.id)
      const res = await axios.get(`/paihangbangxiang/?msg=${state.id}`);
      // console.log(res);
      state.data = res.data;
      state.imgs = res.imgs;
      state.totle = res.totle;
      // state.lls=res.data
    });
    const bock=()=>{
      router.push("/pai")
    }
    return {
      state,
      bock
    };
  },
};
</script>

<style scoped>
.ls{
  width: 100%;
  height: auto;
}
.r{
  color: #ccc;
  font-size: 12px;
}
.s{
  width: 50%;
}
.t span{
  font-size: 20px;
  color: orange;
}
.t{
  font-size: 15px;
}
.san{
  width: 100%;
}
.ll{
  padding: 0 10px;
}
.biao{
  font-size: 20px;
}
.er,.san{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.er{
  font-size: 13px;
}
.lie {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.lie img{
  width: 30%;
  height: 80px;
}
.yo{
  width: 67%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.chang{
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
}
.h4 {
  font-size: 20px;
  font-weight: 600;
}

.header {
  width: 100%;
  height: 50px;
  background: rgb(46, 114, 241);
}
.sa {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: #fff;
  font-size: 18px;
}
.bin {
  width: 100%;
  height: 200px;
  background: rgb(46, 114, 241);
  display: flex;
  align-items: center;
}
.zhong {
  width: 85%;
  height: 150px;
  margin: 0 auto;
  background: #fff;
  border-radius: 13px;
  -webkit-box-shadow: 1px 1px 3px #292929;
  -moz-box-shadow: 1px 1px 3px #292929;
  box-shadow: 1px 1px 3px #292929;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.zhong img {
  width: 100%;
  height: 150px;
  border-radius: 13px;
}
.z {
  width: 50%;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  line-height: 35px;
  border-radius: 13px 0 0 13px;
}
</style>
